<div class="row">
    <div class=" col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel" style="position: relative;z-index: 111; padding: 0;border: 0">
            <!--<button type="button" id="btn1" onclick="queryErrorShaftCoverSensor()" style="position: absolute; z-index: 1111111">井盖传感器故障率-大屏展示-点击事件</button><br/>-->
            <!--<button type="button" id="btn2" onclick="queryErrorGasSensor()" style="position: absolute; z-index: 1111111">有毒气体传感器故障率-大屏展示-点击事件</button><br/>-->
            <!--<button type="button" id="btn3" onclick="shaftCoverSensorErrorEvent(1)" style="position: absolute; z-index: 1111111">井盖传感器故障事件-大屏展示-点击事件</button><br/>-->
            <!--<button type="button" id="btn4" onclick="gasSensorErrorEvent(1)" style="position: absolute; z-index: 1111111">有毒气体传感器故障事件-大屏展示-点击事件</button><br/>-->

                <div id="map" style=" width: 100%;height: 700px">
                </div>


        </div>
    </div>


</div>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    $(function () {
        var hei = $(window).height();
        $("#map").css("height", hei - 50 + "px");

        $(window).resize(function () {
            var hei = $(window).height();
            $("#map").css("height", hei - 50 + "px");
        });
        queryErrorUnitList();
    });


    function queryErrorUnitList() {
        $.ajax({
            url: "/unit/queryErrorUnitList", type: "POST", success: function (result) {
                if (result.success === true) {
                    var list = result.data;
                    for (var i = 0; i < list.length; i++) {
                        console.log(list[i].status);
                        eventUp(list[i].lng, list[i].lat, list[i].status, list[i]);
                    }
                }

            },
            error: function () {
                $.MsgBox.Alert("提示", "与服务器连接超时!");
            }
        });
    }

    var infowin;

    function getUnit(obj) {
        var unitId = $(obj).attr("id");
        $.ajax({
            url: "/unit/getUnit", type: "POST", data: {"unitId": unitId}, success: function (result) {
                if (result.success === true) {
                    var unitTypeId = result.data.unitTypeId;
                    var image = './images/unitTypeImg/' + unitTypeId + '.png';
                    clearStatus();
                    var size = new SuperMap.Size(44, 33);
                    var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
                    var icon = new SuperMap.Icon(image, size, offset);
                    map.setCenter(new SuperMap.LonLat(result.data.lng, result.data.lat), 15);
                    var maker = new SuperMap.Marker(new SuperMap.LonLat(result.data.lng, result.data.lat), icon);
                    markerLayer.addMarker(maker);


                    var contentHTML = "";
                    contentHTML += "<div style='margin:25px 10px; padding:0;'>";
                    contentHTML += "<p>部件编码:  " + result.data.unitCode + "</p>";
                    contentHTML += "<p>部件类型:  " + result.data.unitTypeName + "</p>";
                    contentHTML += "<p>主管部门:  " + result.data.deptMainName + "</p>";
                    contentHTML += "<p>权属部门:  " + result.data.deptOwnerName + "</p>";
                    contentHTML += "<p>养护部门:  " + result.data.deptKeepName + "</p>";
                    contentHTML += "<p>初始时间:  " + result.data.startDate + "</p>";
                    contentHTML += "<p>废弃时间:  " + result.data.finishDate + "</p>";
                    contentHTML += "<p>经&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度:  " + result.data.lng + "</p>";
                    contentHTML += "<p>纬&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度:  " + result.data.lat + "</p>";
                    contentHTML += "<p>状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态:  " + result.data.exceedTimeFlag + "</p>";
                    contentHTML += "</div>";
                    if (infowin) {
                        infowin.hide();//隐藏窗体对象
                        infowin.destroy();//消毁窗体对象
                    }
                    var popup = new SuperMap.Popup.FramedCloud(//定义内容
                        "popwin",
                        new SuperMap.LonLat(result.data.lng, result.data.lat),//获取坐标点
                        new SuperMap.Size(0, 0),
                        contentHTML,//append
                        icon,
                        true,
                        null);
                    infowin = popup;
                    map.addPopup(popup);

                } else {
                    $.MsgBox.Alert("提示", result.message);
                }
            },
            error: function () {
                $.MsgBox.Alert("提示", "与服务器连接超时!");
            }
        });


    }

    function query() {
        $(".cx_block").css("display", "inline-block");
        var ids = new Array();
        var treeObj = $.fn.zTree.getZTreeObj("tree");
        var nodes = treeObj.getCheckedNodes(true);
        for (var i = 0, l = nodes.length; i < l; i++) {
            ids.push(nodes[i].id);
        }

        $("#w_table").empty();
        if (ids.length > 0) {
            $.goToShow("/getUnitByTypeId", {ids: ids});
        }
    }

    /*]]>*/
</script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var SERVERIP = [[${SERVERIP}]];
    var LNGLOA = [[${LNG}]];
    var LATLOA = [[${LAT}]];
    var map, local, layer, vectorLayer,layerBlack, layerHarbin, layerJZ, layerJG, vectorLayer1, gpsLine, eventLayer,errorShaftCoverSensorLayer, markerLayer,
        drawPoint, resultLayer,
        points, infowin,
        styleLine = {
            strokeColor: "blue",
            strokeWidth: 3,
            strokeLinecap: "round",
            strokeDashstyle: "solid"
        },
        style = {
            strokeColor: "#304DBE",
            strokeWidth: 1,
            pointerEvents: "visiblePainted",
            fillColor: "#304DBE",
            fillOpacity: 0.5
        },
        url1 = SERVERIP + HB_SERVER_IP,
        urlJZ = SERVERIP + BJ_JZ_SERVER,
        urlJG = SERVERIP + BJ_JG_SERVER,
        urlJZDate = SERVERIP + BJ_GEOGRAPHY_DATA,
        urlJZMap = SERVERIP + BJ_GEOGRAPHY_MAP,
        urlblack = SERVERIP + HB_SERVER_BLACK,
        url2 = SERVERIP + HB_SERVER_CH;//地图服务地址
    $(function () {
        layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url1, null, {maxResolution: "auto"});
        layer.events.on({"layerInitialized": addLayer});
        vectorLayer = new SuperMap.Layer.Vector("Vector Layer");
        vectorLayer1 = new SuperMap.Layer.Vector("Vector Layer1");
        resultLayer = new SuperMap.Layer.Vector("Result Layer");
        markerLayer = new SuperMap.Layer.Markers("Markers");
        eventLayer = new SuperMap.Layer.Markers("事件变色");
        errorShaftCoverSensorLayer = new SuperMap.Layer.Markers("故障井盖传感器");

        /*点查询*/
        drawPoint = new SuperMap.Control.DrawFeature(vectorLayer, SuperMap.Handler.Point);
        drawPoint.events.on({"featureadded": drawPointCompleted});

        map = new SuperMap.Map("map", {
            controls: [
//            new SuperMap.Control.LayerSwitcher(),
//                new SuperMap.Control.ScaleLine(),
//                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                }),drawPoint
            ],
            units: "m", allOverlays: true
        });

        bufferAnalystProcess();
        bufferAnalystProcessForJG();

    });

    /*黑色*/
    function addLayer() {
        layerBlack = new SuperMap.Layer.TiledDynamicRESTLayer("黑色图层", urlblack, {
            transparent: true,
            cacheEnabled: true
        });
        layerBlack.events.on({
            "layerInitialized": addLayer1
        });
        layerBlack.setOpacity(0.5);
    }

    /*中文注释*/
    function addLayer1() {
        layerHarbin = new SuperMap.Layer.TiledDynamicRESTLayer("中文注释", url2, {
            transparent: true,
            cacheEnabled: true
        });
        layerHarbin.events.on({
            "layerInitialized": addLayer2
        });
        layerHarbin.setOpacity(0.9);
    }

    /*基站*/
    function addLayer2() {
        layerJZ = new SuperMap.Layer.TiledDynamicRESTLayer("基站", urlJZ, {
            transparent: true,
            cacheEnabled: true
        });
        layerJZ.events.on({
            "layerInitialized": addLayer3
        });
        layerJZ.setOpacity(0.9);
    }

    /*井盖*/
    function addLayer3() {
        layerJG = new SuperMap.Layer.TiledDynamicRESTLayer("井盖", urlJG, {
            transparent: true,
            cacheEnabled: true
        });
        layerJG.events.on({
            "layerInitialized": addLayer4
        });
        layerJG.setOpacity(0.9);
    }

    /*载入涂层*/
    function addLayer4() {
        map.addLayers([layer, layerHarbin, layerJZ, layerJG,layerBlack, vectorLayer, resultLayer, vectorLayer1, markerLayer, eventLayer]);
        map.addLayers([errorShaftCoverSensorLayer]);
        map.setCenter(new SuperMap.LonLat(LNGLOA, LATLOA), 13);
        drawPoint.activate();
    }

    /*获取基站坐标*/
    function getFeaturesBySQLForJZ() {
        vectorLayer.removeAllFeatures();
        var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;
        getFeatureParam = new SuperMap.REST.FilterParameter({
            name: "BaseStation@jizhan",
            attributeFilter: "SMID > 0"
        });
        getFeatureBySQLParams = new SuperMap.REST.GetFeaturesBySQLParameters({
            queryParameter: getFeatureParam,
            datasetNames: ["jizhan:BaseStation"]
        });
        getFeatureBySQLService = new SuperMap.REST.GetFeaturesBySQLService(urlJZDate, {
            eventListeners: {"processCompleted": processCompleted, "processFailed": processFailed}
        });
        getFeatureBySQLService.processAsync(getFeatureBySQLParams);
    }

    function processCompleted(getFeaturesEventArgs) {
        var list = getFeaturesEventArgs.originResult.features;

        for (var i = 0; i < list.length; i++) {
            console.log(list[i].fieldValues[0] + "-@-" + list[i].fieldValues[1] + "-@-" + list[i].fieldValues[2]);
        }
    }

    /* 生成线 */
    function getLine(points) {
        var pathFeature = new SuperMap.Feature.Vector();
        gpsLine = new SuperMap.Geometry.LineString(points);
        pathFeature.geometry = gpsLine;
        pathFeature.style = styleLine;
        resultLayer.addFeatures(pathFeature);
    }

    /*基站范围*/
    function bufferAnalystProcess() {
        var bufferServiceByDatasets = new SuperMap.REST.BufferAnalystService(urlJZMap),
            bufferDistance = new SuperMap.REST.BufferDistance({
                value: 500
            }),
            bufferSetting = new SuperMap.REST.BufferSetting({
                endType: SuperMap.REST.BufferEndType.ROUND,
                leftDistance: bufferDistance,
                rightDistance: bufferDistance,
                semicircleLineSegment: 10
            }),
            filterParameter = new SuperMap.REST.FilterParameter({
                attributeFilter: "SMID>0"
            }),
            dsBufferAnalystParameters = new SuperMap.REST.DatasetBufferAnalystParameters({
                dataset: "BaseStation@jizhan",
                filterQueryParameter: filterParameter,
                bufferSetting: bufferSetting
            });
        bufferServiceByDatasets.events.on({
            "processCompleted": bufferAnalystCompleted,
            "processFailed": bufferAnalystFailed
        });
        bufferServiceByDatasets.processAsync(dsBufferAnalystParameters);
    }

    function bufferAnalystCompleted(args) {
        var styleRegion = {
            strokeColor: "#304DBE",
            strokeWidth: 2,
            pointerEvents: "visiblePainted",
            fillColor: "#304DBE",
            fillOpacity: 0.4
        };
        args.result.recordset.features[0].style = styleRegion;
        resultLayer.addFeatures(args.result.recordset.features);
    }

    function bufferAnalystFailed(args) {
        alert(args.error.errorMsg);
    }

    /*井盖*/
    function bufferAnalystProcessForJG() {
        resultLayer.removeAllFeatures();
        var bufferServiceByDatasets = new SuperMap.REST.BufferAnalystService(urlJZMap),
            bufferDistance = new SuperMap.REST.BufferDistance({
                value: 100
            }),
            bufferSetting = new SuperMap.REST.BufferSetting({
                endType: SuperMap.REST.BufferEndType.ROUND,
                leftDistance: bufferDistance,
                rightDistance: bufferDistance,
                semicircleLineSegment: 10
            }),
            filterParameter = new SuperMap.REST.FilterParameter({
                attributeFilter: "SMID>0"
            }),
            dsBufferAnalystParameters = new SuperMap.REST.DatasetBufferAnalystParameters({
                dataset: "WellCover@jinggai",
                filterQueryParameter: filterParameter,
                bufferSetting: bufferSetting
            });
        bufferServiceByDatasets.events.on({
            "processCompleted": bufferAnalystCompleted,
            "processFailed": bufferAnalystFailed
        });
        bufferServiceByDatasets.processAsync(dsBufferAnalystParameters);
    }

    function bufferAnalystCompleted(args) {
        var styleRegion = {
            strokeColor: "#304DBE",
            strokeWidth: 2,
            pointerEvents: "visiblePainted",
            fillColor: "#304DBE",
            fillOpacity: 0.4
        };
        args.result.recordset.features[0].style = styleRegion;
        resultLayer.addFeatures(args.result.recordset.features);
    }

    function bufferAnalystFailed(args) {
        alert(args.error.errorMsg);
    }

    /*点击事件*/
    function drawPointCompleted(drawGeometryArgs) {
        var feature = new SuperMap.Feature.Vector();
        feature.geometry = drawGeometryArgs.feature.geometry,
            feature.style = style;
        vectorLayer.addFeatures(feature);
        var point = feature.geometry;            //-------------------------
        centerPoint = point;
        queryByDistance();
    }

    function queryByDistance() {
        var queryByDistanceParams = new SuperMap.REST.QueryByDistanceParameters({
            queryParams: new Array(new SuperMap.REST.FilterParameter({name: "WellCover@jinggai"})),//Capitals@World.1
            returnContent: true,
            distance: 30,
            isNearest: true,
            expectCount: 1,
            geometry: centerPoint
        });
        var queryByDistanceService = new SuperMap.REST.QueryByDistanceService(urlJG);
        queryByDistanceService.events.on({
            "processCompleted": processCompleted,
            "processFailed": processFailed
        });
        queryByDistanceService.processAsync(queryByDistanceParams);
    }

    function processCompleted(queryEventArgs) {
        var smId = queryEventArgs.result.recordsets[0].features[0].data.SmID;
        console.log(queryEventArgs.result.recordsets[0].features[0].data);
        console.log(queryEventArgs.result.recordsets[0].features[0].data.SmID);
        console.log(queryEventArgs.result.recordsets[0].features[0].data.SmX);
        console.log(queryEventArgs.result.recordsets[0].features[0].data.SmY);
//        eventUp(queryEventArgs.result.recordsets[0].features[0].data.SmX, queryEventArgs.result.recordsets[0].features[0].data.SmY, 999999)
    }

    function processFailed(e) {
        alert(e.error.errorMsg);
    }

    /*突变事件*/
    function eventUp(lng, lat, level, data) {
        eventLayer.clearMarkers();
        var size = new SuperMap.Size(25, 40);//图片大小限制
        var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);//偏移量
        var icon = null;
        if (level === "1") icon = new SuperMap.Icon('../images/ZhenDong.gif', size, offset);
        if (level === "2") icon = new SuperMap.Icon('../images/YiShui.gif', size, offset);
        if (level === "4") icon = new SuperMap.Icon('../images/QingJiao.gif', size, offset);
        if (level === "999999") icon = new SuperMap.Icon('../images/1111.gif', size, offset);
        var marker = new SuperMap.Marker(new SuperMap.LonLat(lng, lat), icon);

        marker.events.on({//点击事件
            "click": function () {
                if (infowin) {
                    infowin.hide();//隐藏窗体对象
                    infowin.destroy();//消毁窗体对象
                }
                var marker = this;
                var contentHTML = "";
                contentHTML += "<div style='margin:25px 10px; padding:0;'>";
                contentHTML += "<p>部件编码:  " + data.unitCode + "</p>";
                contentHTML += "<p>部件类型:  " + data.unitTypeName + "</p>";
                contentHTML += "<p>主管部门:  " + data.deptMainName + "</p>";
                contentHTML += "<p>权属部门:  " + data.deptOwnerName + "</p>";
                contentHTML += "<p>养护部门:  " + data.deptKeepName + "</p>";
                contentHTML += "<p>初始时间:  " + data.startDate + "</p>";
                contentHTML += "<p>废弃时间:  " + data.finishDate + "</p>";
                contentHTML += "<p>经&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度:  " + data.lng + "</p>";
                contentHTML += "<p>纬&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度:  " + data.lat + "</p>";
                // contentHTML += "<p>超时状态:  " + data.exceedTimeFlag + "</p>";
                contentHTML += "</div>";
                var lonlat = marker.getLonLat();//获取点击的坐标
                var size = new SuperMap.Size(0, 0);//初始位置移动量，按照点击的坐标偏移，(正数-右@负数-左，正数-上@负数-下)
                var offset = new SuperMap.Pixel(0, -20);//显示信息窗口的偏移量，(正数-右@负数-左，正数-下@负数-上)
                var icon = new SuperMap.Icon(null, size, offset);
                var popup = new SuperMap.Popup.FramedCloud(//定义内容
                    "popwin",
                    new SuperMap.LonLat(lonlat.lon, lonlat.lat),//获取坐标点
                    new SuperMap.Size(0, 0),
                    contentHTML,//append
                    icon,
                    true,
                    null);
                infowin = popup;
                // map.addPopup(popup);
            }
        });

        eventLayer.addMarker(marker);
    }

    /*清空*/
    function clearStatus() {
        errorShaftCoverSensorLayer.clearMarkers();
    }
    /*放置图片*/
    function putPhotoData(lng,lat,object) {
        var size = new SuperMap.Size(55, 60);//图片大小限制
        var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);//偏移量
        var icon = new SuperMap.Icon(object, size, offset);
        var marker = new SuperMap.Marker(new SuperMap.LonLat(lng, lat), icon);
        errorShaftCoverSensorLayer.addMarker(marker);
    }
    /*井盖传感器故障率-大屏展示-点击事件*/
    function queryErrorShaftCoverSensor() {
        $.goTo(/*[[@{toUnitList}]]*/"./unit_list.html",function () {
            clearStatus();
            $.getJSON("/bigScreen/shaftCoverSensorError",function (data) {
                $(data.data).each(function (index, item) {
                    putPhotoData(item.lon,item.lat,'../images/GasSensor.png');
                });
            });
        });

    }
    /*有毒气体传感器故障率-大屏展示-点击事件*/
    function queryErrorGasSensor() {
        clearStatus();
        $.getJSON("/bigScreen/gasSensorError",function (data) {
            $(data.data).each(function (index, item) {
                putPhotoData(item.lon,item.lat,'../images/ShaftCoverSensor.png');
            });
        });
    }
    /*井盖传感器故障事件-大屏展示-点击事件*/
    function shaftCoverSensorErrorEvent(id) {
        clearStatus();
        $('#content').empty();
        if(id==1){
            getUnitBySmId(18);
        }
        if(id==2){
            getUnitBySmId(19);
        }
        if(id==3){
            getUnitBySmId(20);
        }
        $.getJSON("/bigScreen/shaftCoverSensorErrorEvent",{"id":id},function (data) {
            $(data.data).each(function (index, item) {
                if(item.status == 1){
                    putPhotoData(item.lon,item.lat,'../images/ZhenDong.gif');
                }
                if(item.status == 2){
                    putPhotoData(item.lon,item.lat,'../images/YiShui.gif');
                }
                if(item.status == 4){
                    putPhotoData(item.lon,item.lat,'../images/QingJiao.gif');
                }

            });
        });
    }
    /*有毒气体传感器故障事件-大屏展示-点击事件*/
    function gasSensorErrorEvent(id) {
        clearStatus();
        $.getJSON("/bigScreen/gasSensorErrorEvent",{"id":id},function (data) {
            $(data.data).each(function (index, item) {
                putPhotoData(item.lon,item.lat,'../images/YouHaiQiTi.gif');
            });
        });
    }
    /*]]>*/
</script>